<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input
          placeholder="请输入内容"
          v-model="searchForm.keyWords"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-search" @click="getData"
          >检索</el-button
        >
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col
        :span="6"
        v-for="(item, index) in resultData.result"
        v-bind:key="index"
        style="margin-top: 5px"
      >
        <div class="grid-content bg-purple">
          <el-card
            :body-style="{ padding: '0px', margin: '0px', height: '400px' }"
            shadow="hover"
          >
            <img lazy fit="fill" :src="item.imgUrl" class="image" />
            <div style="padding: 14px">
              <span class="title">{{ item.title }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ item.currentPrice }}元</time>
                <el-button
                  type="text"
                  class="button"
                  @click="
                    $router.push({ path: `/1688/shop/detail/${item.offerId}` })
                  "
                  >查看详情</el-button
                >
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px; float: right">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.current"
          :page-sizes="[15]"
          :page-size="15"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="resultData.totalCount"
        ></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      resultData: {},
      searchForm: {
        accessToken: "",
        current: 1,
        keyWords: "生活家具",
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchForm.current = val;
      this.getData();
    },
    async getData() {
      this.GLOBAL.BASE_LOADING = true;
      if (this.searchForm.keyWords) {
        await this.$http
          .post(`/goods/search`, this.searchForm)
          .then((response) => {
            if (response.data.code === 403) {
              this.$message({
                message: "网络错误【" + response.data.message + "】",
                type: "warning",
              });
            } else {
              this.resultData = JSON.parse(response.data.message).result;
            }
            this.GLOBAL.BASE_LOADING = false;
          })
          .catch((err) => {
            this.GLOBAL.BASE_LOADING = false;
            this.$message({
              message: "网络错误" + err.message,
              type: "warning",
            });
          });
      } else {
        this.$message({ message: "关键字不可以为空", type: "warning" });
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style>
.image {
  width: 100%;
  height: 300px;
}
.title {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
